  <!--自定义动态tarbar 在需要展示tarbar的页面引入即可
      <tabBar selectedIndex = 0></tabBar>
      第一种：
       * 根据身份判断 动态显示tarbar内容
      第二种：
       * 有具体的页面传递需要动态显示的tarbar，也是支持的
      设计思路：tarbar组件根据页面传递的动态内容显示不同tarbar效果
    -->
<template>
  <view class="tab">
    <nut-tabbar
      bottom
      safe-area-inset-bottom
      placeholder
      :unactive-color="unactiveColor"
      :active-color="activeColor"
      v-model="selectedIndex"
      @tab-switch="switchTab"
    >
      <nut-tabbar-item v-for="(item, index) in list" :tab-title="item.text" :key="index">
        <template #icon="props">
          <img v-if="props.active" :src="item.selectedIconPath" />
          <img v-else :src="item.iconPath" />
        </template>
      </nut-tabbar-item>
    </nut-tabbar>
  </view>
</template>

<script setup>
  import { ref, watchEffect } from 'vue'
  import { useOutsideTabBarStore } from '../../store/navBar'
  const useTabBarStore = useOutsideTabBarStore()
  // 选中的tabbar的index
  const selectedIndex = computed({
    get() {
      return useTabBarStore.selectedIndex
    },
    set(val) {
      // console.info('val', val)
    }
  })

  defineOptions({
    name: 'tabBar'
  })
  const props = defineProps({
    //   defaultSelectedIndex: {
    //     type: Number, // 当前选中的tab index
    //  }
  })

  const list = ref([]) // nav数据
  const unactiveColor = ref('#666666') // 默认颜色
  const activeColor = ref('#b08f5d') // 选中颜色
  const currentPath = ref('') // 现在的路径

  onShow(() => {
    // 确保每次切换都执行
    const pagePath = '/' + getCurrentPages()[0].route
    currentPath.value = pagePath
    // 监听currentPath list
    watch(
      [() => currentPath.value, () => list.value],
      (newVal, oldValue) => {
        let listArr = [...newVal[1]]
        if (newVal[0] && listArr && listArr.length) {
          listArr.forEach((item, index) => {
            if (item.pagePath === newVal[0]) {
              useTabBarStore.setSelectIndex(index)
            }
          })
        }
      },
      {
        immediate: true,
        deep: true
      }
    )
  })

  // 点击跳转
  const switchTab = (item, index) => {
    let url = list.value[index].pagePath
    // uni.reLaunch  、 uni.navigateTo
    uni.switchTab({
      url: url // 跳转tarbar 使用这种方式
    })
  }
  onMounted(() => {
    /**
     * 第一种：
     * 根据身份判断 动态显示tarbar内容
     * 登录从后端获取值设置值
     */
    let roleType = uni.getStorageSync('roleType') || ''
    if (roleType == 'costom') {
      //角色1
      list.value = [
      {
          pagePath: '/pages/home/index',
          text: '首页',
          iconPath: 'https://img.gooagoo.com/demominiprogram/demopic/xiaofei.png',
          selectedIconPath: 'https://img.gooagoo.com/demominiprogram/demopic/xiaofei_s.png'
        },
        {
          pagePath: '/pages/pinpai/index',
          text: '品牌',
          iconPath: 'https://img.gooagoo.com/demominiprogram/demopic/pinpai.png',
          selectedIconPath: 'https://img.gooagoo.com/demominiprogram/demopic/pinpai_s.png'
        },
        {
          pagePath: '/pages/billList/index',
          text: '消费历史',
          iconPath: 'https://img.gooagoo.com/demominiprogram/demopic/lishi.png',
          selectedIconPath: 'https://img.gooagoo.com/demominiprogram/demopic/lishi_s.png'
        },
        {
          pagePath: '/pages/index/index',
          text: '个人中心',
          iconPath: 'https://img.gooagoo.com/demominiprogram/demopic/wo.png',
          selectedIconPath: 'https://img.gooagoo.com/demominiprogram/demopic/wo_s.png'
        }
      ]
    } else {
      //角色2 item.selectedIconPath : item.iconPath"
      list.value = [
        {
          pagePath: '/pages/index/index',
          text: '个人中心',
          iconPath: 'https://img.gooagoo.com/demominiprogram/demopic/wo.png',
          selectedIconPath: 'https://img.gooagoo.com/demominiprogram/demopic/wo_s.png'
        }
      ]
    }
    /**
     * 第二种：
     * 有具体的页面传递需要动态显示的tarbar，也是支持的
     */
  })
</script>

<style lang="scss"></style>
